<template>
    <div id="category">
        <nav-bar class="nav-bar">
            <div slot="center">分了类你也找不到</div>
            <div slot="right" @click="searchClick">搜索</div>
        </nav-bar>
        <div class="content">
            <tab-menu :categories="categories" @selectItem="selectItem"></tab-menu>
            <tab-content-category :subCategoriesList="showSubCategory" @selectDetail="selectDetail"></tab-content-category>
            <scroll id="tab-content" :data="[subCategoryDetail]" class="category-detail">
                <tab-content-detail :categoryDetail="subCategoryDetail"></tab-content-detail>
            </scroll>
        </div>
    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import TabMenu from './childComps/TabMenu'
import Scroll from 'components/common/scroll/Scroll'
import TabContentCategory from './childComps/TabContentCategory'
import TabContentDetail from './childComps/TabContentDetail'

import {selectStairCategory, selectSecondCategory, selectCategoryDetail} from 'network/category.js'
export default {
    name: "Category",
    data() {
        return {
            categories: [],
            currentIndex: -1,
            currSubIndex:-1,
            subCategory: [],
            subCategoryDetail: []
        }
    },
    components: {
        NavBar,
        TabMenu,
        Scroll,
        TabContentCategory,
        TabContentDetail
    },
    computed: {
        showSubCategory() {
            if(this.currentIndex === -1) {
                return [];
            }else {
                return this.subCategory;
            }
        }
    },
    created() {
        this._selectStairCategory();
    },
    methods: {
        _selectStairCategory() {
            selectStairCategory().then((res) => {
                // console.info(res);
                this.categories = res.data;
                // 根据一级分类的个数初始化二级分类，创建子数据
                // for (let i = 0; i < this.categories.length; i++) {
                //     this.categoryData[i] = {
                //         subcategories: [],
                //         categoryDetail: []
                //     }
                // }
                // 默认显示第一个分类的二级分类数据
                this._selectSecondCategory(0);
            })
        },
        _selectSecondCategory(index) {
            this.currentIndex = index;
            selectSecondCategory(this.categories[index].id).then((res) => {
                console.info(res);
                this.subCategory = res.data;
                this._selectCategoryDetail(0);                
            })
        },
        _selectCategoryDetail(index) {
            this.currSubIndex = index;
            selectCategoryDetail(this.subCategory[index].id).then((res) => {
                console.info(res);
                this.subCategoryDetail = res.data;
            })
        },
        selectItem(index) {
            // console.info(this.categories[index].id);
            // console.info(index);
            this._selectSecondCategory(index);
        },
        selectDetail(index) {
            // console.info(index);
            // console.info(this.subCategory[index].id);
            this._selectCategoryDetail(index);
        },
        searchClick() {
            this.$router.push('/category/search')
        }
    },
    
}
</script>

<style scoped>
.nav-bar {
    position: relative;
    z-index: 9;
    background-color: greenyellow;
    color: #fff;
}
#category {
    height: 100vh;
}

.content {
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    bottom: 49px;
    display: flex;
}
.category-detail {
    position: relative;
    width: 240px;
}
</style>